<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn" class="image1"></image>
			<view>场地险购买</view>
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//sitlishi.png" class="image2" @click="recordsbtn"></image>
		</view>
		<view class="show">
			<view class="first">
				<view class="one">
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//cdxselect.png"></image>
					<input placeholder='小区名称搜索' v-model="name" @input="onInput"/>
				</view>
				<view class="two">
					<view class="twotxt">
						未投保设备<span style="color:#E00101 ;margin-left: 10upx;">{{onelist.uninsureDevice}}</span>
					</view>
					<view class="twotxt">
						投保中设备<span style="color:#16E001 ;margin-left: 10upx;">{{onelist.insureDevice}}</span>
					</view>
					<view class="twotxt">
						端口单价<span style="margin-left: 10upx;">{{onelist.portMoney}}</span>（元/年）
					</view>
				</view>
			</view>

			<view class="three">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item, index) in alist" :key="index" >
					<view class="threemap" @click="goxiaoqu(item.projectName,item.projectId)">
						<view class="threeleft">
							<view class="threeleftone">{{item.projectName}}</view>
							<view class="threelefttwo">
								<span style="width:300upx">投保中：设备（台）<span style="color:#16E001 ;">{{item.insureDevice}}</span></span>
								<span style="margin-left: 15upx;">端口（个）<span style="color:#16E001 ;">{{item.insurePort}}</span></span>
							</view>
							<view class="threelefttwo">
								<span style="width:300upx">未投保：设备（台）<span style="color:#E00101 ;">{{item.uninsuredDevice}}</span></span>
								<span style="margin-left: 15upx;">端口（个）<span style="color:#E00101 ;">{{item.uninsuredPort}}</span></span>
							</view>
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
					</view>
				</van-cell>
				</van-list>
				</van-pull-refresh>	
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		components: {
			
		},
		mounted() {

		},

		data() {
			return {
				name: '',
				onelist:'',
				alist:[],//本区消费数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.firstshow()
			this.loadMore()
		},
		methods: {
			blackbtn() {
				uni.navigateBack()
			},
			goxiaoqu(name,projectId){
				uni.navigateTo({
					url:'/pages/site_insurance_community/site_insurance_community?name='+name+'&projectId='+projectId
				})
			},
			firstshow(){
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$base.request1('manager/insure/countDeviceInsures', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.onelist=res.data.data
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
						
					})
			},
			// 用户统计详情分页
			loadMore() {
				if (this.refreshing) {
				  this.alist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					userId: uni.getStorageSync('userId'),
					currentPage:that.pageNum,
					pageSize:that.pageSize,
					projectName:this.name
				}
				that.loading = true;
				that.$base.request1('manager/insure/getDeviceInsuresInfo', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.code==200){
							if(res.data.data.list&&res.data.data.list.length>0){
								that.alist = that.alist.concat(res.data.data.list);
								that.pageNum += 1;
							}else{
								that.finished = true;
							}
						}else{
							that.finished = true;
						}
						
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			onInput(e){
				this.alist=[]
				this.onRefresh()
			},
			recordsbtn() {
				uni.navigateTo({
					url: '/pages/site_insurance_records/site_insurance_records'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		padding-top: 84upx;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.hand{
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;  
			-moz-text-size-adjust: 100% !important;
			width: 100%;
			background-color: #4B98ED;
			font-size: 30upx;
			padding: 14upx 31upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			position: fixed;
			top: 0upx;
			z-index: 1;
			.image1{
				width:22upx;
				height: 39upx;
			}
			.image2{
				width: 48upx;
				height: 58upx;
			}
			
		}
		.show {
			width: 100%;
			position: relative;
			
			.first {
				width: 100%;
				box-sizing: border-box;
				height: 239upx;
				padding: 15upx 30upx;
				background: #4B98ED;
				.one {
					width: 100%;
					box-sizing: border-box;
					text-align: center;
					display: flex;
					border-radius: 44upx;
					padding: 15upx 20upx;
					background-color: #fff;
					align-items: center;

					image {
						width: 34upx;
						height: 34upx;
					}

					input {
						width: 100%;
					}

					/deep/.uni-input-placeholder {
						font-size: 30upx;
						font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
						font-weight: normal;
						color: #CECECE;
						line-height: 36upx;
					}
				}

				.two {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 24upx;
					font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
					font-weight: normal;
					color: #FDF9F9;
					line-height: 29upx;
					box-sizing: border-box;
					padding: 0 15upx;
					margin: 15upx auto;
				}
			}

			.three {
				position: absolute;
				top: 164upx;
				width: 94.5%;
				left: 2.8%;
				box-sizing: border-box;
				/deep/.van-cell{
					width: 97%;
					margin: 0 auto;
					padding: 17upx 30upx;
					background: #FFFFFF;
					box-shadow: 0px 6upx 16upx 1upx rgba(22,86,176,0.2);
					border-radius: 10upx;
					margin-bottom: 23upx;
				}
				.threemap {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					
					.threeleft {
						.threeleftone {
							font-size: 30upx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #666666;
							line-height: 36upx;
							margin-bottom: 23upx;
						}

						.threelefttwo {
							width: 100%;
							display: flex;
							align-items: center;
							font-size: 26upx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #999;
							line-height: 31upx;
						}
					}

					image {
						width: 14upx;
						height: 24upx;
					}
				}
			}
		}

	}
</style>